@import "partials/mixins";
#totalFlow {
	.box {
		padding: 0 ptr(15px);
		.boxHead {
			height: ptr(80px);
			border-bottom: 1px solid #F0F0F0;
			margin-bottom: ptr(40px);
			.title {
				font-size: ptr(32px);
				position: relative;
				margin-left: ptr(30px);
				&::before {
					content: '';
					width: ptr(10px);
					height: ptr(36px);
					display: block;
					position: absolute;
					left: ptr(-20px);
					top: ptr(5px);
					background-color: #41C0C1;
					border-radius: ptr(5px);
				}
			}
			.unitText {
				color: #919191;
				padding-left: ptr(10px);
				font-size: ptr(20px);
			}
			.open {
				color: #4DC5C4;
				width: ptr(150px);
				.open_icon {
					height: ptr(50px);
					width: ptr(50px);
					background: url("~img/open_icon.png") no-repeat center center;
					background-size: ptr(98px) ptr(77px);
				}
				.close_icon {
					height: ptr(50px);
					width: ptr(50px);
					background: url("~img/close_icon.png") no-repeat center center;
					background-size: ptr(98px) ptr(77px);
				}
			}
		}
	}
	.flowAllStore {
		background-color: #fff;
		padding-bottom: ptr(45px);
		.chart {
			width: 100%;
			height: ptr(540px);
		}
		.storechart {
			width: 100%;
			height: ptr(460px);
		}
	}
	.flowAllThree {
		background-color: #fff;
		margin-top: ptr(20px);
		border-top: 1px solid #eee;
		.store {
			margin-bottom: ptr(25px);
		}
		.storeHeader {
			height: ptr(60px);
			border-bottom: 1px solid #F0F0F0;
			.title {
				font-size: ptr(32px);
				position: relative;
				margin-left: ptr(30px);
			}
			.rank {
				color: #41C0C1;
				margin-right: ptr(10px);
			}
			.unitText {
				color: #919191;
				padding-left: ptr(10px);
				font-size: ptr(20px);
			}
			.open {
				color: #4DC5C4;
				width: ptr(100px);
			}
		}
		.chart {
			width: 100%;
			height: ptr(470px);
		}
		.bottomText {
			width: 100%;
			margin: auto;
			margin-top: ptr(30px);
			padding-bottom: ptr(20px);
			border-bottom: 1px solid #D9D9D9;
			.item {
				font-size: ptr(26px);
				height: ptr(55px);
				line-height: ptr(55px);
				color: #47BDC6;
				position: relative;
				.point {
					margin: 0 ptr(10px);
					width: ptr(12px);
					height: ptr(12px);
					display: block;
					background-color: #47BDC6;
					border-radius: ptr(12px);
				}
			}
		}
	}
	.storePer {
		position: relative;
		.pieMid {
			width: ptr(140px);
			height: ptr(70px);
			text-align: center;
			position: absolute;
			left: 50%;
			top:  ptr(330px);
			font-size: ptr(12px);
			margin-left: ptr(-70px);
		}
	}
}
